/**
* 帐号设置
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, ScrollView } from "react-native";
import { connect } from 'react-redux';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import ImagePicker from 'react-native-image-picker'
import { Actions } from 'react-native-router-flux';
import Toast from 'react-native-root-toast';
import { ProgressView } from '../custom/index'

class PersonalSettingView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            headerImg: props.userInfo && props.userInfo.user.avatar
        }
        this.options = {
            title: '选择照片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '从相册中选取',
            mediaType: 'photo',
            maxWidth: 750,
            maxHeight: 1000,
            quality: 0.5,
        }
        this.userInfo = props.userInfo
    }
    componentDidMount() {

    }
    componentWillUnmount() {

    }
    componentWillReceiveProps(nextProps) {
        this.userInfo = nextProps.userInfo
    }
    itemClick(index) {
        switch (index) {
            case '2':
                //修改手机号
                Actions.personalModifyOldPhoneView()
                break;
            case '3':
                //修改登录密码
                Actions.personalModifyLoginPasswordView()
                break;
            case '4':
                //修改提现密码
                // Actions.personalWithdrawPasswordView()
                break;
            default:
                break;
        }
    }
    showImagePicker() {
        ImagePicker.showImagePicker(this.options, (response) => {
            if (response.didCancel) { } else if (response.error) { } else if (response.customButton) { } else {
                let source = { uri: Dimens.isIOS ? response.uri.replace('file://', '') : response.uri, isStatic: true }
                this.uploadImage(source.uri)
            }
        })
    }
    uploadImage(image) {
        this.setState({ loading: true })
        let filename = image.substr(image.lastIndexOf('/') + 1)
        let uploader_image = { uri: image, type: 'multipart/form-data', name: filename };
        this.props.dispatch(create_service(Contract.POST_USER_UPDATE_AVATAR, { image: uploader_image, token: this.userInfo.token })).then((res) => {
            if (res) {
                this.setState({ headerImg: res }, () => {
                    this.getUserInfo()
                })
            }
        })
    }
    getUserInfo() {
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_INFO, { token: this.userInfo.token })).then((res) => {
            if (res) {
                this.props.dispatch({ type: 'SAVE_USER_INFO', data: { data: { user: res, token: this.userInfo.token } } });
            }
            this.setState({ loading: false })
        })
    }
    logout() {
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_LOGOUT, { token: this.userInfo.token })).then(res => {
            this.setState({ loading: false })
            if (res) {
                this.props.dispatch({ type: 'CLEAN_USER_INFO', data: { data: null } });
                Actions.replace('auth')
            }
        })
    }
    renderItem(title, value, hideArrow, index) {
        return (
            <TouchableOpacity style={{ flexDirection: 'row', justifyContent: 'space-between', backgroundColor: Colors.white_color, paddingVertical: 20, paddingHorizontal: 15, marginTop: 1 }} activeOpacity={0.8} onPress={() => {
                this.itemClick(index)
            }}>
                <Text style={{ fontSize: 16, color: Colors.textCommonBlack }}>{title}</Text>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: 16, color: "#999999" }}>{value}</Text>
                    {!hideArrow ? <Image style={{ width: 10, height: 16 }} source={ImageRes.team_right_arrow}></Image> : <View style={{ marginRight: 5 }}></View>}
                </View>
            </TouchableOpacity>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <TouchableOpacity style={{ flexDirection: 'row', justifyContent: 'space-between', backgroundColor: "#ffffff", padding: 15, marginTop: 10 }} activeOpacity={0.8} onPress={() => {
                        this.showImagePicker()
                    }}>
                        <Text style={{ fontSize: 16, color: Colors.textCommonBlack, alignSelf: 'center' }}>头像设置</Text>
                        <View style={{ flexDirection: 'row' }}>
                            <Image style={{ width: 40, height: 40, borderRadius: 20 }} source={this.state.headerImg ? { uri: this.state.headerImg } : ImageRes.personal_default_header}></Image>
                            <Image source={ImageRes.team_right_arrow} style={{ width: 10, height: 16, alignSelf: 'center', marginLeft: 15 }} />
                        </View>
                    </TouchableOpacity>

                    {this.renderItem('注册时间', this.userInfo && this.userInfo.user.create_time, true, "0")}
                    {this.renderItem('姓名', this.userInfo && this.userInfo.user.nick_name, true, "1")}
                    {this.renderItem('更改手机号', '', false, "2")}
                    {this.renderItem('更改登陆密码', '', false, "3")}
                    {/* {this.renderItem('修改提现密码', '', false, "4")} */}

                    <TouchableOpacity style={{ justifyContent: 'center', backgroundColor: '#ffffff', paddingVertical: 15, borderRadius: 8, marginVertical: 50, width: Dimens.DeviceWidth - 30, flexDirection: 'row', marginLeft: 15 }} onPress={() => {
                        this.logout()
                    }} activeOpacity={0.8} >
                        <Image source={ImageRes.personal_exit} style={{ width: 20, height: 24, alignSelf: 'center' }}></Image>
                        <Text style={{ fontSize: 16, color: "#333333", alignSelf: 'center', marginLeft: 15 }}>安全退出</Text>
                    </TouchableOpacity>
                </ScrollView>
                <ProgressView show={this.state.loading}></ProgressView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bg_color
    }
});
function mapStateToProps(state) {
    return {
        userInfo: state.auth.userInfo
    }
}
const ExportView = connect(mapStateToProps)(PersonalSettingView);
module.exports.PersonalSettingView = ExportView
